<template>
  <div>
    <el-dialog
      :title="title"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="visible"
    >
      <el-form
        :model="inputForm"
        ref="inputForm"
        v-loading="loading"
        :class="method==='view'?'readonly':''"
        :disabled="method==='view'"
        label-width="110px"
      >
        <div style="font-size:20px;width:100%;">
          <!-- <div style="width:35%;float:left;"> -->
          <div style="float:left;">
            <label>房屋编号:</label>
            <label>&nbsp;&nbsp;{{inputForm.projectNumber}}</label>
          </div>
          <!--<div style="width:65%;float:right;">
            <label>商户名称:</label>
            <label>{{inputForm.companyName}}</label>
          </div>-->
        </div>
        <el-row :gutter="15">
          <el-col>
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              style="margin-top:10px;"
            >
              <el-tab-pane
                label="房产信息"
                name="first"
              >
                <div style="width:100%;">
                  <!--房产信息-->
                  <div style="width:100%;">
                    <div style="width:100%;font-size:18px;border-bottom:1px double #ddd; line-height:40px;">房产信息</div>
                    <div style="width:100%;margin-top:20px;">
                      <el-col :span="12">
                        <el-form-item
                          label="房产性质:"
                          prop="projectProperty"
                        >
                          <el-select
                            v-model="inputForm.projectProperty"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in projectPropertyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="房产类型:">
                          <el-select
                            v-model="inputForm.buildingType"
                            placeholder="请选择"
                            @change="getSysProjectType()"
                            style="width:100%;"
                          >
                            <el-option
                              v-for="item in proBuildTypeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="房产楼号/区域:">
                          <!-- <el-input v-model="inputForm.projectTypeId"></el-input> -->
                          <el-select v-model="inputForm.projectTypeId">
                            <el-option
                              v-for="(item,index) in projectTypeIdList"
                              :label="item.label"
                              :key="index"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="楼层:"
                          prop="projectFloorNumber"
                        >
                          <el-input v-model="inputForm.projectFloorNumber"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="房号:"
                          prop="projectName"
                        >
                          <el-input v-model="inputForm.projectName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="面积(㎡):"
                          prop="projectArea"
                        >
                          <el-input v-model="inputForm.projectArea"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="房产状态:"
                          prop="projectStatus"
                        >
                          <el-select
                            v-model="inputForm.projectStatus"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in proStatusList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="关联合同:"
                          prop="remarks"
                        >
                          <el-select
                            v-if="inputForm.ctContract"
                            v-model="inputForm.ctContract.contractNumber"
                          >
                            <el-option
                              key=""
                              label=""
                              value=""
                            > </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <!--<el-col :span="12">
                  <el-form-item label="备注信息" prop="remarks"
                                :rules="[
                         ]">
                    <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
                  </el-form-item>
                </el-col>-->
                    </div>
                  </div>
                  <!--操作日志 -->
                  <div style="width:100%;float:left;">
                    <div style="width:100%;font-size:18px;border-bottom:1px double #ddd; line-height:40px; ">操作日志</div>
                    <div
                      class="block"
                      style="margin-top: 20px;"
                    >
                      <el-timeline>
                        <el-timeline-item
                          v-for="(activity, index) in logList"
                          :key="index"
                          icon="el-icon-more"
                          size="large"
                          :timestamp="activity.modifyContent"
                        >
                          {{activity.updateByName}}&nbsp;&nbsp;{{activity.updateDate}}
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <!--历史记录-->
              <el-tab-pane
                label="历史记录"
                name="second"
              >
                <el-table
                  :data="historyList"
                  border
                  size="medium"
                  v-loading="loading"
                  class="table"
                >

                  <el-table-column
                    prop="projectNumber"
                    show-overflow-tooltip
                    label="房产编号"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="modifyProjectStatus"
                    show-overflow-tooltip
                    :formatter="formatterStatus"
                    label="房产状态"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="contractNumber"
                    show-overflow-tooltip
                    label="关联合同"
                  >
                    <template
                      slot="modifyContractId"
                      slot-scope="scope"
                    >
                      <el-link
                        type="primary"
                        :underline="false"
                        @click="handleContractView('view',scope.row.modifyContractId)"
                      >{{scope.row.contractNumber}}</el-link>
                    </template>
                  </el-table-column>
                  <!--<el-table-column prop="remarks"
                                   show-overflow-tooltip
                                   
                                   label="备注">
                  </el-table-column>-->
                  <el-table-column
                    prop="updateByName"
                    label="操作人"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="updateDate"
                    show-overflow-tooltip
                    label="操作时间"
                  >
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script>
import { getObj, getProjectType, getSysProjectType, getProjectStatus, getProjectpProperty, getOperationLog, getModifyLog } from '@/api/market/estate/rmproject'
import { getDicType } from '@/api/common'
export default {
  data () {
    return {
      title: '',
      method: '',
      dialogWidth: '40%',
      visible: false,
      activeName: 'first',
      projectPropertyList: [],
      proBuildTypeList: [],
      proStatusList: [],
      projectTypeIdList: [],
      loading: false,
      inputForm: {
        id: '',
        modifyProjectStatus: '',
        projectStatus: null,
        projectArea: '',
        projectName: '',
        projectFloorNumber: '',
        projectTypeId: '',
        buildingType: '',
        projectProperty: null,
        projectNumber: '',
        remarks: '',
        delFlag: '',
        ctContract: {
          id: '',
          contractNumber: '',
        },
        ctContractProjectList: null,
        sysProjectType: {
          id: '',
          typeName: ''
        },
      },
      //操作记录
      logList: [], //logType: 1,//1.房产 2.车辆 3.合同
      //历史记录
      historyList: [],
    }
  },
  created () {
    //房产状态
    getProjectStatus().then(response => {
      if (response.data != null) {
        this.proStatusList = response.data.data;
      }
    })
    //房产性质
    getProjectpProperty().then(response => {
      if (response.data != null) {
        this.projectPropertyList = response.data.data;
      }
    })
    //获取房产类型
    getProjectType().then(response => {
      if (response.data != null) {
        this.proBuildTypeList = response.data.data;
      }
    })
  },
  methods: {
    formatterStatus (row) {
      let labelstr = ''
      for (let i = 0; i < this.proStatusList.length; i++) {
        if (this.proStatusList[i].value == row.modifyProjectStatus) {
          labelstr = this.proStatusList[i].label
          break
        }
      }
      return labelstr
    },
    handleClick (tab, event) {
      //tab切换历史记录,加载数据
      if (tab.name == 'second') {
        //获取操作日志
        getModifyLog(this.inputForm.id).then(response => {
          if (response.data.data != null) {
            this.historyList = response.data.data;
          }
        })
      }
    },
    init (method, id) {
      this.method = method
      this.inputForm.id = id
      if (method === 'view') {
        this.title = '查看房产'
      }
      this.visible = true
      //获取房产详情数据
      //this.loading = false
      this.$nextTick(() => {
        this.$refs.inputForm.resetFields()
        if (method === 'view') {
          //获取房产信息
          getObj(id).then(response => {
            //if (response.data.data.ctContract == null) {
            //  response.data.data.ctContract = contract;
            //}
            //else {
            //  contract.id = response.data.data.ctContract.id;
            //  response.data.data.ctContract = contract;
            //}
            response.data.data.projectProperty = (response.data.data.projectProperty || '') + '';
            response.data.data.projectStatus = (response.data.data.projectStatus || '') + '';

            this.inputForm = response.data.data;
            getDicType(this.inputForm.buildingType).then(res => {
              this.projectTypeIdList = res.data.data
            })
            // if (this.inputForm.buildingType == 1) {
            //   getDicType('exclusive_shop').then(res => {
            //     this.projectTypeIdList = res.data.data
            //   })
            // } else if (this.inputForm.buildingType == 2) {
            //   getDicType('complex_building').then(res => {
            //     this.projectTypeIdList = res.data.data
            //   })
            // } else {
            //   getDicType('exhibition').then(res => {
            //     this.projectTypeIdList = res.data.data
            //   })
            // }
          })
          //获取操作日志
          getOperationLog(id).then(response => {
            if (response.data.data != null) {
              this.logList = response.data.data;
            }

          })
        }
      })
    },
    //查看合同
    handleContractView (method, id) {
      //打开合同详情
    },
  }
}</script>
